<template>
    <div v-if="deviceType === DeviceType.SERVER" style="margin-bottom: 0.5rem;">
        <h5 style="margin: 0.5rem 0; color: var(--color-primary); font-size: 0.85em;">服务器配置</h5>
        <div style="margin-bottom: 0.25rem;">
            <label style="display: block; margin-bottom: 0.15rem; font-size: 0.8em;">CPU:</label>
            <input v-model="modelValue.cpu" type="text" placeholder="例如: Intel Xeon E5-2680"
                style="width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.85em;" />
        </div>
        <div style="margin-bottom: 0.25rem;">
            <label style="display: block; margin-bottom: 0.15rem; font-size: 0.8em;">内存:</label>
            <input v-model="modelValue.memory" type="text" placeholder="例如: 64GB DDR4"
                style="width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.85em;" />
        </div>
        <div style="margin-bottom: 0.25rem;">
            <label style="display: block; margin-bottom: 0.15rem; font-size: 0.8em;">存储:</label>
            <input v-model="modelValue.storage" type="text" placeholder="例如: 2TB SSD RAID1"
                style="width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.85em;" />
        </div>
        <div style="margin-bottom: 0.25rem;">
            <label style="display: block; margin-bottom: 0.15rem; font-size: 0.8em;">操作系统:</label>
            <input v-model="modelValue.operatingSystem" type="text" placeholder="例如: Ubuntu 20.04 LTS"
                style="width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.85em;" />
        </div>
    </div>

    <div v-else-if="[DeviceType.SWITCH, DeviceType.ROUTER, DeviceType.FIREWALL].includes(deviceType)"
        style="margin-bottom: 0.5rem;">
        <h5 style="margin: 0.5rem 0; color: var(--color-primary); font-size: 0.85em;">网络配置</h5>
        <div style="margin-bottom: 0.25rem;">
            <label style="display: block; margin-bottom: 0.15rem; font-size: 0.8em;">端口数量:</label>
            <input v-model.number="modelValue.portCount" type="number" min="0"
                style="width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.85em;" />
        </div>
        <div style="margin-bottom: 0.25rem;">
            <label style="display: block; margin-bottom: 0.15rem; font-size: 0.8em;">管理IP:</label>
            <input v-model="modelValue.managementIP" type="text" placeholder="例如: 192.168.1.100"
                style="width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.85em;" />
        </div>
        <div style="margin-bottom: 0.25rem;">
            <label style="display: block; margin-bottom: 0.15rem; font-size: 0.8em;">固件版本:</label>
            <input v-model="modelValue.firmware" type="text" placeholder="例如: v12.2.55"
                style="width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.85em;" />
        </div>
    </div>

    <div v-else-if="deviceType === DeviceType.STORAGE" style="margin-bottom: 0.5rem;">
        <h5 style="margin: 0.5rem 0; color: var(--color-primary); font-size: 0.85em;">存储配置</h5>
        <div style="margin-bottom: 0.25rem;">
            <label style="display: block; margin-bottom: 0.15rem; font-size: 0.8em;">容量:</label>
            <input v-model="modelValue.capacity" type="text" placeholder="例如: 10TB"
                style="width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.85em;" />
        </div>
        <div style="margin-bottom: 0.25rem;">
            <label style="display: block; margin-bottom: 0.15rem; font-size: 0.8em;">RAID级别:</label>
            <input v-model="modelValue.raidLevel" type="text" placeholder="例如: RAID 5"
                style="width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.85em;" />
        </div>
        <div style="margin-bottom: 0.25rem;">
            <label style="display: block; margin-bottom: 0.15rem; font-size: 0.8em;">接口类型:</label>
            <input v-model="modelValue.interfaceType" type="text" placeholder="例如: SAS/SATA"
                style="width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 4px; font-size: 0.85em;" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { DeviceType } from '@/stores/datacenter'

interface DeviceForm {
    name: string
    description: string
    type: DeviceType
    rackPosition: number
    rackUnits: number
    powerConsumption: number
    // 服务器特有属性
    cpu: string
    memory: string
    storage: string
    operatingSystem: string
    // 网络设备特有属性
    portCount: number
    managementIP: string
    firmware: string
    // 存储设备特有属性
    capacity: string
    raidLevel: string
    interfaceType: string
}

interface Props {
    modelValue: DeviceForm
    deviceType: DeviceType
}

defineProps<Props>()

defineEmits<{
    'update:modelValue': [value: DeviceForm]
}>()
</script>